<!-- 订单->待签收->关单 -->
<template>
  <el-form ref="ruleForm"
           :model="ruleForm"
           label-width="90px"
           :rules="rules">
    <el-form-item class="reasonTextarea"
                  prop="reason">
      <el-input v-model="ruleForm.reason"
                type="textarea"
                placeholder="请输入关单原因"
                maxlength="200"
                @input="descInput"></el-input>
      <span class="numberV"
            style="position: absolute; right: 10px;bottom: 0;">{{txtVal}}/200</span>
    </el-form-item>
    <!-- 按钮 -->
    <div class="footer-btn">
      <el-button type="default"
                 @click="handleCancel">取消</el-button>
      <el-button type="primary"
                 :loading="loading"
                 @click="submit">{{
          loading ? "提交中 ..." : "确 定"
        }}</el-button>
    </div>
  </el-form>
</template>

<script>
import orderApi from '@/api/modules/orderNew'
export default {
  name: 'BillEntry',
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      ruleForm: {
        desc: '',
      },
      rules: {
        reason: [
          {
            required: true,
            message: "请输入关单原因",
            trigger: "blur"
          }
        ]
      },
      loading: false,
      txtVal: 0,
    }
  },
  computed: {
    row () {
      return this.value;
    },
  },
  methods: {
    // 提交
    submit () {
      this.loading = true;
      this.timer = setTimeout(() => {
        setTimeout(() => {
          this.handelSave();
        }, 400);
      }, 1500);
    },
    // 关单
    async handelSave () {
      if (!this.ruleForm.reason) {
        this.$message.warning("关单原因不能为空")
        this.loading = false;
        return
      }
      let params = {
        orderId: this.row.orderId,
        closeReason: this.ruleForm.reason
      }
      await orderApi.close(params)
      this.loading = false;
      this.$message({ type: "success", message: "关单成功" });
      this.$emit("confirm");
    },
    descInput () {
      this.txtVal = this.ruleForm.reason.length;
    },
    // 取消
    handleCancel () {
      this.$emit("cancel");
      this.$refs.ruleForm.clearValidate();
    }
  }
}
</script>

<style scoped>
.footer-btn {
  text-align: right;
  padding-top: 10px;
}
.reasonTextarea >>> .el-form-item__content {
  margin: 0 !important;
}
.reasonTextarea >>> .el-textarea__inner {
  min-height: 100px !important;
}
</style>